<template>
  <el-row loading>
    <el-col :span="24">
       <transportLine-edit ref="transportLineEdit"></transportLine-edit>
       <transportTrips-add ref="transportTripsAdd"></transportTrips-add>
      <el-row >
        <el-col :span="6">
            <el-input placeholder="请输入线路编号" size="small"  style="width:100%"></el-input>
        </el-col>
        <el-col :span="6">
           <el-input placeholder="请输入线路名称" size="small"  style="width:100%">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select placeholder="请输入线路类型"  style="width:100%">
            <!-- <el-option
              v-for="item in parentFleet"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"></el-option> -->
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="danger"  size="small" @click="queryAll()">搜索</el-button>
        </el-col>
        <el-col :span="24" style="text-align: left;">
          <el-button  icon="el-icon-plus" type="danger" @click="handleCreatetransportLine()" v-show="add">新增线路</el-button>
        </el-col>
      </el-row>
      </el-col>
       <el-col :span="24">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="expand">
            <template slot-scope="">
                <el-table>
                <el-table-column label="车次名称" header-align="center" prop=""></el-table-column>
                <el-table-column label="发车频次" header-align="center" prop=""></el-table-column>
                <el-table-column label="到达时间" header-align="center" prop=""></el-table-column>
                <el-table-column label="车辆司机安排" header-align="center" prop="" ></el-table-column>
                <el-table-column label="操作" header-align="center" align="center" width="300">
                <template slot-scope="scope">
                <el-button v-show="edit" type="primary" size="mini"
                  @click="handleEdittransportTrips(scope.row)">编辑车次</el-button>
                <el-button  type="danger" size="mini"
                  @click="handleDeletetransportTrips(scope.row.id)">删除车次</el-button>
                  <el-button  type="primary" size="mini"
                  @click="handleArrangevehicles(scope.row.id)">安排车辆</el-button>
                  <el-button  type="primary" size="mini"
                  @click="handleArrangethedriver(scope.row.id)">安排司机</el-button>
              </template>
                </el-table-column>
                </el-table>
            </template>
            </el-table-column>



            <el-table-column prop="" label="线路编号" header-align="center"></el-table-column>
            <el-table-column prop="" label="线路名称" header-align="center"></el-table-column>
            <el-table-column prop="" label="线路类型" header-align="center"></el-table-column>
            <el-table-column prop="" label="起始地机构" header-align="center"></el-table-column>
            <el-table-column prop="" label="目的地机构" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="距离(千米)" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="平均成本(元)" header-align="center" align="center"></el-table-column>
            <el-table-column prop="" label="预计时间(分)" header-align="center" align="center"></el-table-column>
            <el-table-column label="线路地图" header-align="center" align="center">
                <i class="el-icon-location-outline"></i>
                <button  type="button" class="el-button btn el-button--text el-button--small">
                    <span>地图</span>
                    </button>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="300">
              <template slot-scope="scope">
                <el-button v-show="edit" type="primary" size="mini"
                  @click="handleEdittransportLine(scope.row)">修改</el-button>
                <el-button  type="danger" size="mini"
                  @click="handleDeletetransportLine(scope.row.id)">删除</el-button>
                  <el-button  type="primary" size="mini"
                  @click="handleCreatetransportTrips(scope.row.id)" v-show="addcc">增加车次</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
        <el-col :span="24">
         <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="currentChange"
            :current-page.sync="page"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
          </el-pagination>
        </el-col>
      </el-row>
        </el-col>
</el-row>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }


</style>

<script>
// import axios from 'axios'
import TransportLineEdit from '@/components/transportLine/transportLineEdit'
import TransportTripsAdd from '@/components/transportLine/transportTripsAdd'
  export default {
    data() {
      return {
        add:true,
        edit:true,
        addcc:true,
        loading:true,
        page:1,
        pageSize:2,
        counts:0,
        tableData: [{

        }, {

        }, {

        }, {

        }]
      }
    },
    methods: {
        //分页方法
        currentChange(val){
        this.page=val;
        this.queryAll();
      },
      handleSizeChange(val) {
        this.pageSize=val;
        this.queryAll();
        },
        //添加
      handleCreatetransportLine(){
        this.loading = true
        this.$refs.transportLineEdit.$emit('openAddTransportLineDialog')
        this.loading = false
      },
      //修改
      handleEdittransportLine(){
        // console.loading(row)
        this.loading = true
        this.$refs.transportLineEdit.$emit('openEditTransportLineDialog')
        this.loading=false
      },
      //新增车次
      handleCreatetransportTrips(){
          this.loading=true;
          this.$refs.transportTripsAdd.$emit('openAddTransportTripsDialog')
          this.loading=false;
      },
       //编辑车次
      handleEdittransportTrips(){
        this.loading = true
        this.$refs.transportLineTypeEdit.$emit('openAddTransportLineTypeDialog')
        this.loading = false
      },
      //安排车辆
      handleArrangevehicles(){

      },
      //安排司机
      handleArrangethedriver(){

      }
    },
    components:{TransportLineEdit,TransportTripsAdd}
  }
</script>

